<template>
  <basic-container>
    <basic-header title="指派商家" />
    <FilterTable :option="filterOption" :showBtn="false" @handle-filter="data => filterData = data" />
    <avue-crud :page="pageOption" :option="tableOption" :data="tableData" :table-loading="loading" @current-change="handlePageTo" @size-change="handleSizeChange">
      <template slot-scope="{ row }" slot="menu">
        <el-button type="primary" size="small" icon="el-icon-share" @click.stop="handleChoose(row)">指派</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>
import actionTypes from "@/const/action";
import cloumnsOptionMap from "@/const/columns";
import filterOptionMap from "@/const/filters";
import FilterTable from "@/components/FilterTable";
import { SyncGetTableData } from "@/api/table";
import { mapMutations, mapState } from "vuex";
import { PromiseDesignateMerchant } from "@/api/config";

const DEFAULT_TABLE_OPTIONS = {
  refreshBtn: false,
  columnBtn: false,
  addBtn: false,
  maxHeight: 560,
  border: false,
  menuWidth: 290,
  menuAlign: "center",
  align: "center",
  editBtn: false,
  delBtn: false,
  header: false
};

export default {
  name: "first",
  data() {
    return {
      action: actionTypes.MERCHANT_LIST,
      formPath: "",
      pageOption: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 10 //每页显示多少条
      },
      tableData: [],
      loading: false,
      filterData: {}
    };
  },
  computed: {
    ...mapState("table", ["currentData"])
  },
  created() {
    if (!this.currentData.designateFrom) {
      this.$router.go(-1);
      return;
    }
    this.tableOption = {
      ...DEFAULT_TABLE_OPTIONS,
      column: cloumnsOptionMap[this.action] || []
    };
    this.filterOption = filterOptionMap[this.action] || [];
    this.getPageData();
  },
  methods: {
    ...mapMutations({
      setCurrentData: "table/SET_CURRENT_DATA"
    }),
    async getPageData() {
      this.loading = true;
      const { data, error } = await SyncGetTableData(this.action, {
        pageIndex: this.pageOption.currentPage,
        pageSize: this.pageOption.pageSize,
        ...this.filterData
      });
      if (error) {
        this.$message({
          type: "error",
          message: error
        });
      } else {
        this.setPageOption({
          total: data.count
        });

        this.tableData = data.bussData;
      }
      this.loading = false;
    },
    setPageOption(opt) {
      this.pageOption = Object.assign({}, this.pageOption, opt);
    },
    handleChoose(row) {
      this.$confirm("确认指派吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        PromiseDesignateMerchant(this.currentData.designateFrom, row.id)
          .then(() => {
            this.$message({
              type: "success",
              message: "指派成功"
            });
            this.$router.go(-1);
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: error.message || String(error)
            });
          });
      });
    },
    handlePageTo(num) {
      this.setPageOption({
        currentPage: num
      });
      this.getPageData();
    },
    handleSizeChange(size) {
      this.setPageOption({
        currentPage: 1,
        pageSize: size
      });
      this.getPageData();
    }
  },
  components: { FilterTable }
};
</script>


